<template>
    <div class="message">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="message-con">
            <div class="message-list" v-for="item in list" :key="item.id" @click="$router.push(`/messagelist?type=${item.key}&name=${item.type}`)">
                <img :src="item.icon" alt="" class="img-icon" />
                <div class="info">
                    <div class="info-top">
                        <div>{{ item.type }}</div>
                        <p>{{ item.date }}</p>
                    </div>
                    <div class="info-desc">{{ item.content }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            titleSize: this.$t('title.my_news'),
            is_mt: true,
            list: []
        }
    },
    mounted() {
        this.$post(this.URL.member.messageAll, {}).then(res => {
            if (res.code == 0) {
                this.list = res.data.list;
            }
        })
    }
}
</script>

<style lang="less" scoped>
.message {
    min-height: 100vh;
    background: #F7F7FA;

    .message-con {
        padding: .88rem 0 0;
        .message-list{
            padding: .32rem .38rem 0;
            background: #fff;
            display: flex;
            .img-icon{
                flex: 0 0 .92rem;
                height: .92rem;
                object-fit: cover;
                border-radius: 50%;
                background-image: url('../../assets/images/moren.png');
                background-size: 100%;
            }
            .info{
                margin-left: .26rem;
                flex: 1;
                padding-bottom: .38rem;
                border-bottom: 0.01rem solid #E7EAED;
                .info-top{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    font-size: .24rem;
                    color: #999999;
                    line-height: .4rem;
                    div{
                        font-size: .3rem;
                        color: #222222;
                    }
                }
                .info-desc{
                    margin-top: .18rem;
                    font-size:.26rem;
                    color: #999999;
                    line-height: .34rem;
                }
            }
        }
    }
}
</style>